import {Component, EventEmitter, Input, Output} from "@angular/core";

@Component({
    selector:"df-password-page",
    template:`
        <div class="pass-page">
            <div class="page-title">
                <span class="df-ico-quit" (click)="cancel.emit()"></span>
                <span style="width:18rem;display:inline-block;">请输入{{passName}}</span>
            </div>
            <ng-content></ng-content>
            <div class="pass-view">
                <div [class.validate]="currentPassword.length>0"></div>
                <div [class.validate]="currentPassword.length>1"></div>
                <div [class.validate]="currentPassword.length>2"></div>
                <div [class.validate]="currentPassword.length>3"></div>
                <div [class.validate]="currentPassword.length>4"></div>
                <div [class.validate]="currentPassword.length>5"></div>
            </div>
            <div style="text-align:right;padding-right:1rem;margin-bottom:20px;" (click)="resetPass.emit()">忘记密码?</div>
            <div class="pass-input">
                <div (click)="input(1)">1</div>
                <div (click)="input(2)">2</div>
                <div (click)="input(3)">3</div>
                <div (click)="input(4)">4</div><div (click)="input(5)">5</div><div (click)="input(6)">6</div>
                <div (click)="input(7)">7</div><div (click)="input(8)">8</div><div (click)="input(9)">9</div>
                <div (click)="input('ce')">CE</div><div (click)="input(0)">0</div><div class="df-ico-backspace"  (click)="input('bs')"></div>
            </div>
        </div>
    `,
    styles:[
            `
            .pass-page{
                background-color:var(--popup-background-color);
                position:absolute;
                bottom:0;
                text-align:center;
            }
            .page-title{
                line-height:2;
                font-size:120%;
                border-bottom:1px solid var(--borderColor);
                margin-bottom:20px;
            }
            .pass-view{
                display:flex;
                display:webkit-flex;
                line-height:3rem;
                margin:20px 1rem 10px 1rem;
                width:18rem;
                font-size:120%;
            }
            .pass-view div{
                width:3rem;
                height:3rem;
                border:1px solid var(--borderColor);
            }
            .pass-input{
                width:20rem;
                display:flex;
                display:webkit-flex;
                flex-wrap:wrap;
            }
            .pass-input div{
                width:6.666rem;
                line-height:4;
                border:1px solid var(--borderColor);
            }
            .validate:before{
                content:"*"
            }
        `
    ]
})
export class PasswordPageComponent{
    currentPassword:string="";
    @Input() passName:string="支付密码";
    @Output() validate:EventEmitter<any>=new EventEmitter();
    @Output() resetPass:EventEmitter<void>=new EventEmitter<void>();
    @Output() cancel:EventEmitter<void>=new EventEmitter<void>();

    input(val:string|number){
        switch(val){
            case "ce":
                this.currentPassword="";
                break;
            case "bs":
                this.currentPassword=this.currentPassword.substring(0,this.currentPassword.length-1);
                break;
            default:
                if(this.currentPassword.length>=6){
                    this.validate.emit(this);
                }else{
                    this.currentPassword+=val;
                    if(this.currentPassword.length>=6){
                        this.validate.emit(this);
                    }
                }

        }
    }

}
